<template>
    <div>
        <models v-model:age="age" v-model:name="userName"></models>
        <div @click="changeNum" style="padding-top:30px;">
            btn
        </div>
        <div v-for="(item,index) in list" :key="index">
            {{item}}
        </div>    
    </div>
</template>

<script>
import Models from '@/components/models.vue'
//import {ref} from "vue"
export default {
    data(){
        return{
            userName:"0",
            age:"0",
            list:[1,2,3,4,5,6,7,8,9]
           
        }
    },
    // setup(){
    //     let list = ref([1,2,3,4,5,6,7,8,9])
    //     const changeNum = ()=>{
    //         let ram = (Math.random() *10).toFixed(2)
    //         list.value[2] = ram
    //     }
    //     return {
    //         list, changeNum
    //     }
    // },
    methods:{
       changeNum(){
            let ram = (Math.random() *10).toFixed(2)
            this.list[2] = ram
        }
    },

    watch:{
        userName(){
            console.log('1',this.userName)
        },
        age(){
            console.log('2',this.age)
        }
    },
    components:{
        Models
    },
}
</script>